<template>
  <div
    style="background: #fbf7f7; height: 100vh"
  >
    <!-- 导航栏 -->
    <mt-header fixed title="我的" style="background: #f49b00">
      <div slot="right" v-show="$store.state.username">
        欢迎：{{ $store.state.username }}
      </div>
      <div slot="right" v-show="!$store.state.username">
        <router-link to="/login" class="link">登录</router-link>
        <router-link to="/register" class="link">注册</router-link>
      </div>
    </mt-header>
    <div style="height: 40px"></div>

    <!-- 头像及名称 -->
    <div class="ming">
      <div class="van" @click="person" v-show="!$store.state.username">
        <img src="../assets/photo.webp"/> 
        <div>
          <p>名称: 未登录</p>
          <p>简介：暂无简介</p>
        </div>
      </div>
      <div class="van" @click="person" v-show="$store.state.username">
        <img v-if="pic" :src="pic" />
        <img v-else src="../assets/toux.webp" />
        <div>
          <p>昵称：{{ $store.state.username }}</p>
          <p>简介：暂无简介</p>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <van-divider :style="{ color: '', borderColor: '', margin: '7px 0' }"></van-divider>

    <!-- 我的宠物 -->
    <div class="hang" style="margin-top:10px" @click="myadopt">
      <van-icon name="shop" size="25px" color="#f49b00" />
      我的宠物
      <van-icon name="arrow" class="me" />
    </div>
    <!-- 分割线 -->
    <van-divider :style="{ color: '', borderColor: ' ', margin: '7px 0' }"></van-divider>

    <!-- 收藏 -->
    <div class="hang" style="background-color: " @click="mycollection">
      <van-icon name="star" size="20px" color="#f49b00" />
      <!-- <van-icon name="star-o"  /> -->
      收藏
      <van-icon name="arrow" class="mi" /><br />
    </div>
    <!-- 分割线 -->
    <van-divider :style="{ color: '', borderColor: '', margin: '7px 0' }"></van-divider>

    <!-- 设置 -->
    <div class="hang" style="background-color: " @click="shezhi">
      <van-icon name="setting" size="20px" color="#f49b00" />
      设置
      <van-icon name="arrow" class="mi" />
    </div>
    <!-- 分割线 -->
    <van-divider :style="{ color: '', borderColor: '', margin: '7px 0' }"></van-divider>

    <!-- <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="此处暂未开发"
    /> -->
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      pic: '',    //存放头像地址
    }
  },
  mounted(){
    this.getPic()
  },
  methods: {
    // 获得头像地址
    getPic(){
      this.axios.get(`/user/selectPic?uid=${this.$store.state.uid}`).then(res=>{
        this.pic = res.data.results.pic
        // 调用mutation的方法，修改vuex中的用户名及手机号
        this.$store.commit('updatePic',res.data.results.pic)
      })
    },
    // 个人资料
    person() {
      if (this.$store.state.username) {
        this.$router.push("/person");
      } else {
        Toast("未登录");
      }
    },
    // 我的宠物
    myadopt() {
      if (this.$store.state.username) {
        this.$router.push("/myadopt");
      } else {
        Toast("未登录");
      }
    },
    // 我的收藏
    mycollection() {
      if (this.$store.state.username) {
        this.$router.push("/mycol");
      } else {
        Toast("未登录");
      }
    },
    // 设置
    shezhi() {
      this.$router.push("/shezhi");
    },
  },
};
</script>

<style scoped>
/* 登录注册按钮 */
.link {
  color: #fff;
  margin: 0 5px;
}
/* .lang {
  margin-bottom: 80px;
} */
/* .ming {
  height: 80px;
  margin-top: 5px;
  border-bottom: 5px solid #f1f0f0; */
  /* border-radius: 20%; */
/* }
.van {
  display: flex;
  margin: 15px 0;
}
.van > img {
  position: relative;
  left: 10px;
  border-radius: 50%;
}
div > p[data-v-852a155c] {
  position: relative;
  bottom: 10px;
  left: 31px;
  bottom: 0px;
}
.van > img[data-v-852a155c] {
  position: relative;
  left: 15px;
  border-radius: 50%;
}
div > p {
  position: relative;
  bottom: 10px;
  left: 15px;
}
div > p {
  display: flex;
} */

.ming .van{
  display: flex;
  align-items: center;
}
.ming .van img{
  width: 80px;
  height: 80px;
  margin: 10px 15px;
  border-radius: 50%;
}
.ming .van div{
  margin: 0 10px;
}
.ming .van div :first-child{
  margin: 10px 0;
}
.ming .van div :last-child{
  color: #aaa;
  font-size: 14px;
  margin: 0;
}

.me {
  position: relative;
  left: 245px;
}
.mi {
  position: relative;
  left: 281px;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}

/* 设置等标签 */
.hang{
  margin: 15px 10px;
}


/* 标题栏颜色 */
::v-deep .mint-header-title{
  font-size: 15px;
}
</style>